<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 杨雨翰
 * @LastEditTime: 2022-01-06 17:26:29
-->
<template>
  <div id="bottom2" style="height: 95%"></div>
</template>
<script>
//导入图表
import { Area } from "@antv/g2plot";
import { get } from "@/utils/request.js";
import moment from "moment";
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    async loadData() {
      let url = "/dashboard/pageQueryTodayData";
      let params = {
        page: 1,
        pageSize: 20,
        engineer_id: 29,
        device_id: 29,
      };
      let resp = await get(url, params);
      this.pm25 = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("MM-DD"),
          value: parseInt(item.pm25),
          type: "pm2.5",
        };
      });
      this.pm10 = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("MM-DD"),
          value: parseInt(item.pm10),
          type: "pm10",
        };
      });
      this.tsp = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("MM-DD"),
          value: parseInt(item.pm10),
          type: "tsp",
        };
      });
      this.noise = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("MM-DD"),
          value: parseInt(item.pm10),
          type: "noise",
        };
      });
      this.temperature = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("MM-DD"),
          value: parseInt(item.pm10),
          type: "temperature",
        };
      });
      this.pm25 = _.uniqBy(this.pm25, "time");
      this.pm10 = _.uniqBy(this.pm10, "time");
      this.tsp = _.uniqBy(this.tsp, "time");
      this.noise = _.uniqBy(this.noise, "time");
      this.temperature = _.uniqBy(this.temperature, "time");
    },
    initChart() {
      const chartData = [
        ...this.pm25,
        ...this.pm10,
        ...this.tsp,
        ...this.noise,
        ...this.temperature,
      ];
      console.log(chartData);
      const data = [
        { time: "12-10", value: 66, type: "pm2.5" },
        { time: "12-11", value: 69, type: "pm2.5" },
        { time: "12-12", value: 56, type: "pm2.5" },
        { time: "12-10", value: 88, type: "tsp" },
        { time: "12-11", value: 45, type: "tsp" },
        { time: "12-12", value: 79, type: "tsp" },
      ];
      const line = new Line("bottom2", {
        data: data,
        xField: "time",
        yField: "value",
        seriesField: "type",
        xAxis: {
          type: "time",
        },
        yAxis: {
          label: {
            // 数值格式化为千分位
            formatter: (v) =>
              `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
          },
        },
      });

      line.render();
    },
  },
  async mounted() {
    // 查询数据
    await this.loadData();
    this.initChart();
  },
};
</script>